//out:../css/taskDetails.css
@import url(../introduce.less);
.topPreset{
  position: fixed;
}
// 站位
.zhanwei{
  width: 100%;
  height: (50/@rem);
  display: flex;
  align-items: center;
  background-color: #fff;
}
#unfold,#fold{
  position: absolute;
  left: (151/@rem);
  display:block;
  width: (24/@rem);
  height: (24/@rem);
  font-size: @s24;
  text-align: center;
  line-height: (24/@rem);
  color: #EF4F3F;
  border: #eee dashed (1/@rem);
}
.essential{
  .wrapper{
    width: (345/@rem);
    // height: (50/@rem);
    .info{
      position: relative;
      display: flex;
      align-items: center;
      border-radius: (10/@rem);
      padding-top: (14/@rem);
      padding-bottom: (10/@rem);
      h4{
        width: (151/@rem);
        height: (22/@rem);
        padding-left: (20/@rem);
        font-size: @s16;
        line-height: (22/@rem);
      }
      span{
        left:(85/@rem);
        position: absolute;
        display: inline-block;
        font-size: @s12;
        color: #818181;
        padding-left: (3/@rem);
      }
      #unfold{
        left: (147/@rem);
        display:block;
        width: (24/@rem);
        height: (24/@rem);
        font-size: @s24;
        text-align: center;
        line-height: (24/@rem);
        color: #EF4F3F;
        border: #eee dashed (1/@rem);
      }
    }
    // 折叠区
    .hideEssential{
      display: none;
      padding-bottom: (31.34/@rem);
      .content{
        padding-left: (24/@rem);
        padding-right: (17/@rem);
        .address{
          padding-bottom: (22.5/@rem);
          border-bottom: (1/@rem) solid #eee;
          position: relative;
          margin-top: (22.5/@rem);
          .go{
            display: flex;
            .slit{
              position: absolute;
              display:block;
              width: (22.5/@rem);
              height: (22.5/@rem);
              font-size: @s12;
              line-height: (20/@rem);
              color: #fff;
              background-color: #2A2929;
              border-radius: 50%;
              text-align: center;
            }
            p{
              padding-left: (35/@rem);
              color: #818181;
              font-size: @s14;
              line-height: (20/@rem);
            }
          }
          .pit{
            left: (12/@rem);
            top: 37%;
            position: absolute;
            width: @s1;
            height: @s22;
            border: @s1 solid #D9D9D9;
          }
          .to{
            margin-top: (14.5/@rem);
            display: flex;
            .slit{
              position: absolute;
              display:block;
              width: (22.5/@rem);
              height: (22.5/@rem);
              font-size: @s12;
              line-height: (20/@rem);
              color: #fff;
              background-color: #EF4F3F;
              border-radius: 50%;
              text-align: center;
            }
            p{
              padding-left: (37/@rem);
              color: #818181;
              font-size: @s14;
              line-height: (20/@rem);
            }
          }
        }
        // 司机发货日期等
        .text{
          margin-top: (14.5/@rem);
          ul{

            li{
              position: relative;
              &:nth-child(2){
                span{
                  width: (100/@rem);
                  margin-right: (15/@rem);
                }
              }
              display: flex;
              justify-content: space-between;
              margin-bottom: (14.5/@rem);
              p{
                font-size: @s14;
                line-height: (20/@rem);
                color: #818181;
              }
              // .phone{
              //   margin-left: (131/@rem);
              // }
              img{
                right:0;
                position: absolute;
                display: block;
                width: (24/@rem);
                height: (24/@rem);
              }
              span{
                display: flex;
                font-size: @s14;
                line-height: (20/@rem);
              }
            }
          }
        }
      } 
    }
  }
}
.wrapper{
  width: (345/@rem);
  // height: (50/@rem);
  .info{
    display: flex;
    align-items: center;
    border-radius: (10/@rem);
    h4{
      padding-left: (20/@rem);
      font-size: @s16;
      line-height: (22/@rem);
    }
    span{
      font-size: @s12;
      color: #818181;
      padding-left: (3/@rem);
    }
    #unfold{
      margin-left: (151/@rem);
      display:block;
      width: (24/@rem);
      height: (24/@rem);
      font-size: @s24;
        text-align: center;
        line-height: (24/@rem);
        color: #EF4F3F;
      border: #eee dashed (1/@rem);
    }
  }
}
// 车辆司机信息
.driver{
  .wrapper{
    width: (345/@rem);
    // height: (131/@rem);
    border-radius: (10/@rem);
    .info{  
      padding-bottom: (10/@rem);
      display: flex;
    align-items: center;
    h4{
      display: inline-block;
      width: (153/@rem);
      height: (22/@rem);
      margin-top: (14/@rem);
      padding-left: (20/@rem);
      font-size: @s16;
      line-height: (22/@rem);
    }
    #fold{
      margin-top: (14/@rem);
      margin-left: (161/@rem);
      display:block;
      width: (24/@rem);
      height: (24/@rem);
      font-size: @s24;
      text-align: center;
      line-height: (24/@rem);
      color: #EF4F3F;
      border: #eee dashed (1/@rem);
    }
    } 
         // 用于折叠
    .hideDrive{
      display: none;
      .plate{
        display: flex;
        justify-content: space-between;
        .number{
          margin-top: (19.51/@rem);
          margin-left: (22.5/@rem);
          font-size: @s14;
          line-height: (20/@rem);
          color: #818181;
        }
        .num{
          margin-top: (19.51/@rem);
          font-size: @s14;
          line-height: (20/@rem);
          margin-right: (17/@rem);
        }
      }
      // 司机姓名
      .driverName{
        display: flex;
        justify-content: space-between;
        padding-bottom: (10/@rem);
        .name{
          margin-top: (19.51/@rem);
          margin-left: (22.5/@rem);
          font-size: @s14;
          line-height: (20/@rem);
          color: #818181;
        }
        .uname{
          margin-top: (19.51/@rem);
          font-size: @s14;
          line-height: (20/@rem);
          margin-right: (17/@rem);
        }
      }
    } 
  }
 
  // 运输路线

}
// 运输路线
.transRoutes{
  .wrapper{
    width: (345/@rem);
    // height: (131/@rem);
    border-radius: (10/@rem);
    .info{
      padding-bottom: (10/@rem);
      display: flex;
    align-items: center;
    h4{
      display: inline-block;
      width: (153/@rem);
      height: (22/@rem);
      margin-top: (14/@rem);
      padding-left: (20/@rem);
      font-size: @s16;
      line-height: (22/@rem);
    }
    #fold{
      margin-top: (14/@rem);
      margin-left: (161/@rem);
      display:block;
      width: (24/@rem);
      height: (24/@rem);
      font-size: @s24;
      text-align: center;
      line-height: (24/@rem);
      color: #EF4F3F;
      border: #eee dashed (1/@rem);
    }
    } 
    // 用于折叠
    .find{
      display: none;
      ul{
        display: flex;
        justify-content: space-evenly;
        padding-bottom: (29.64/@rem);
        .go{
          text-align: center;
          margin-top: (19.75/@rem);
          div{
            font-size: @s16;
            line-height: (22/@rem);
            color: #2A2929;
            font-weight: 700;
          }
          p{
            margin-top: (3/@rem);
            font-size: @s14;
            line-height: (20/@rem);
            color: #2A2929
          }
        }
        .img{
          margin-top: (19.75/@rem);
        }
        .destination{
          text-align: center;
          margin-top: (19.75/@rem);
          div{
            font-size: @s16;
            line-height: (22/@rem);
            color: #2A2929;
            font-weight: 700;
          }
  
          p{
            margin-top: (3/@rem);
            font-size: @s14;
            line-height: (20/@rem);
            color: #2A2929
          }
        }
      } 
    }
      

  }
}
// 提货信息
.Delivery{
  .wrapper{
    width: (345/@rem);
    // height: (380/@rem);
    border-radius: (10/@rem);
    .info{
      padding-bottom: (10/@rem);
      display: flex;
      align-items: center;
    h4{
      display: inline-block;
      width: (153/@rem);
      height: (22/@rem);
      margin-top: (14/@rem);
      padding-left: (20/@rem);
      font-size: @s16;
      line-height: (22/@rem);
    }
    #fold{
      margin-top: (14/@rem);
      margin-left: (161/@rem);
      display:block;
      width: (24/@rem);
      height: (24/@rem);
      font-size: @s24;
      text-align: center;
      line-height: (24/@rem);
      color: #EF4F3F;
      border: #eee dashed (1/@rem);
    }
    }
    // 用于折叠
    .hidedeli{
      display: none;
      .voucher{
        p{
          margin-top: (25.77/@rem);
          margin-left: (22.5/@rem);
          font-size: @s14;
          line-height: (20/@rem);
          color:#818181 ;
        }
        ul{
          margin-top: (16.49/@rem);
          display: flex;
          margin-left: (22.5/@rem);
          li{
            img{
              display: block;
              width:(95.67/@rem) ;
              height: (95.67/@rem);
              border-radius: (5/@rem);
              margin-right: (10.33/@rem);
            }
          }
        }
  .firm{
          margin-top: (16.49/@rem);
          display: flex;
          margin-left: (22.5/@rem);
          background-color: #F2F2F2;
          width: (95.67/@rem);
          height: (95.67/@rem);
            img{
              margin: auto;
              display: block;
              width:(30/@rem) ;
              height: (30/@rem);
              border-radius: (5/@rem);
              border: dashed #818181 (1/@rem) ;
            }
        }
      }
      .goodsImag{
        padding-bottom: (31.37/@rem);
        p{
          margin-top: (25.77/@rem);
          margin-left: (22.5/@rem);
          font-size: @s14;
          line-height: (20/@rem);
          color:#818181 ;
        }
        ul{
          margin-top: (16.49/@rem);
          display: flex;
          margin-left: (22.5/@rem);
          li{
            img{
              display: block;
              width:(95.67/@rem) ;
              height: (95.67/@rem);
              border-radius: (5/@rem);
              margin-right: (10.33/@rem);
            }
          }
        }
        .imgs{
          width: (95.67/@rem);
          height: (95.67/@rem);
          margin-top: (16.49/@rem);
          display: flex;
          background-color: #F2F2F2;
          margin-left: (22.5/@rem);
            img{
              margin: auto;
              display: block;
              width:(30/@rem) ;
              height: (30/@rem);
              border-radius: (5/@rem);
              border: dashed #818181 (1/@rem) ;
            }
        }
      }
    } 
    
  }
}
// 交货信息
.deliveryInfo{
  .wrapper{
    width: (345/@rem);
    // height: (380/@rem);
    border-radius: (10/@rem);
    .info{
      padding-bottom: (10/@rem);
      display: flex;
      align-items: center;
    h4{
      display: inline-block;
      width: (153/@rem);
      height: (22/@rem);
      margin-top: (14/@rem);
      padding-left: (20/@rem);
      font-size: @s16;
      line-height: (22/@rem);
    }
    #fold{
      margin-top: (14/@rem);
      margin-left: (161/@rem);
      display:block;
      width: (24/@rem);
      height: (24/@rem);
      font-size: @s24;
      text-align: center;
      line-height: (24/@rem);
      color: #EF4F3F;
      border: #eee dashed (1/@rem);
    }
    } 
    .hideInfo{
      display: none;
      .voucher{
        p{
          margin-top: (25.77/@rem);
          margin-left: (22.5/@rem);
          font-size: @s14;
          line-height: (20/@rem);
          color:#818181 ;
        }
        ul{
          margin-top: (16.49/@rem);
          display: flex;
          margin-left: (22.5/@rem);
          li{
            img{
              display: block;
              width:(95.67/@rem) ;
              height: (95.67/@rem);
              border-radius: (5/@rem);
              margin-right: (10.33/@rem);
            }
          }
        }
      }
      .goodsImag{
        padding-bottom: (31.37/@rem);
        p{
          margin-top: (25.77/@rem);
          margin-left: (22.5/@rem);
          font-size: @s14;
          line-height: (20/@rem);
          color:#818181 ;
        }
        ul{
          margin-top: (16.49/@rem);
          display: flex;
          margin-left: (22.5/@rem);
          li{
            img{
              display: block;
              width:(95.67/@rem) ;
              height: (95.67/@rem);
              border-radius: (5/@rem);
              margin-right: (10.33/@rem);
            }
          }
        }
      }
    }
  
  }
}
// 货物信息
.goodsInfo{
  .wrapper{
    width: (345/@rem);
    border-radius: (10/@rem);
    .info{
      padding: (14/@rem) 0 (14/@rem);
      display: flex;
      align-items: center;
      // margin-left: (20/@rem);
      // margin-right: (17/@rem);
      
      h4{
        display: inline-block;
        width: (153/@rem);
        height: (22/@rem);
        padding-left: (20/@rem);
        font-size: @s16;
        line-height: (22/@rem);
        span{
          font-size: @s12;
          line-height: (17/@rem);
          color: #818181;
        }
      }
      
      #unfold{
        margin-left: (161/@rem);
        display:block;
        width: (24/@rem);
        height: (24/@rem);
        font-size: @s24;
        text-align: center;
        line-height: (24/@rem);
        color: #EF4F3F;
        border: #eee dashed (1/@rem);
      }
    }
    .hidegoods{
    display:none;
     padding-bottom: (30/@rem);
      .serch{
        position: relative;
        overflow: hidden;
        img{
          width: (16/@rem);
          height: (16/@rem);
          position: absolute;
          top: 30%;
          left:(10/@rem);
        }
        margin: (17.33/@rem) (17/@rem) (22.87/@rem) (20/@rem);
        input{
          background-color: #F4F4F4;
          width: (308/@rem);
          height: (32/@rem);
          border-radius: (16/@rem);
          padding-left: (33/@rem);
        }
      }
      ul{
        height: (290/@rem);
        overflow-y: scroll;
        li{
          margin-left: (22.5/@rem);
          margin-bottom: (15/@rem);
          margin-right: (22/@rem);
          display: flex;
          justify-content: space-between;
          span{
            font-size: @s14;
            line-height: (20/@rem);
          }
        }
      }
    }
   
  }
 
}
// 异常信息
.abnormal{
  .wrapper{
    padding-bottom: (10/@rem);
    width: (345/@rem);
    // height: (312/@rem);
    border-radius: (10/@rem);
    // 折叠部分
    .content{
      display: none;
      height: (290/@rem);
      overflow-y: scroll;
      ul{
        margin:(24/@rem)  (15/@rem) 0 (21.5/@rem);
        border-bottom: #eee (1/@rem) solid;
        .report{
          display: flex;
          p{
            font-size: @s14;
            line-height: (20/@rem);          
            font-weight: 400; 
          }
          span{
            font-size: @s14;
            line-height: (20/@rem);
            margin-left: (16.5/@rem);
          }
        }
        .typeS{  
          position: relative;    
          margin-top: (18.43/@rem);
          display: flex;
         
          p{
            font-size: @s14;
            line-height: (20/@rem);          
            font-weight: 400; 
          }
          span{
            font-size: @s14;
            line-height: (20/@rem);
            margin-left: (16.5/@rem);
          }
          a{
            right: 0;
            position: absolute;
            display: block;
            width:(24/@rem) ;
            height: (24/@rem);
            border: (1/@rem) dashed #eee;
            
          }
        }
        .outcome{
          margin-top: (18.43/@rem);
          display: flex;
          padding-bottom: (19.5/@rem);
          p{
            font-size: @s14;
            line-height: (20/@rem);          
            font-weight: 400; 
          }
          span{
            font-size: @s14;
            line-height: (20/@rem);
            margin-left: (16.5/@rem);
          }
        }
       }
    }
  
    .info{
      
      display: flex;
    align-items: center;
    h4{
      display: inline-block;
      width: (153/@rem);
      height: (22/@rem);
      margin-top: (14/@rem);
      padding-left: (20/@rem);
      font-size: @s16;
      line-height: (22/@rem);
    }
    #fold{
      margin-top: (14/@rem);
      margin-left: (161/@rem);
      display:block;
      width: (24/@rem);
      height: (24/@rem);
      font-size: @s24;
      text-align: center;
      line-height: (24/@rem);
      color: #EF4F3F;
      border: #eee dashed (1/@rem);
    }
    } 
  }
}
